<template>
    <div class="header">
        <div class="wrapper">
            <div class="login hide-in-mobile">
                <a v-if="!isLogin" href="javascript:;" class="log" @click="login"><span class="icon"></span>登录</a>
                <a v-if="!isLogin" href="javascript:;" class="reg" @click="showReg"><span class="icon"></span>注册</a>
                <a href="javascript:;" v-if="isLogin" class="mine">
                	<span style="cursor:pointer">{{requesrUserNamer }} <i>|</i> <span class="quit" @click="quit"> 退出</span></span>
                </a>
                <router-link :to="{path: '/'}" v-if="isLogin" class="personal">个人中心</router-link>
            </div>
            <div class="logo">
                <router-link :to="{path:'/'}"><img title="国际药品注册网" src="../assets/images/icon/logo.png" alt="国际药品注册网" /></router-link>
            </div>
            <div class="nav hide-in-mobile">
                <ul class="clearfix">
                    <li :class="{'is-active':$route.path == '/'}">
                        <router-link :to="{path:'/'}">首页</router-link>
                    </li>
                    <li :class="{'is-active':$route.path == '/statute'}" class="cascader">
                        <Cascader :data="categoryList.children" trigger="hover" v-model="link" @on-change="getLinkParam"><a>法律法规</a></Cascader>
                    </li>
                    <li :class="{'is-active':curIndex == 2}">
                        <router-link to="/questions">问与答</router-link>
                    </li>
                    <li :class="{'is-active':curIndex == 3}">
                    	<router-link to="/term">术语学习</router-link>
                    </li>
                    <li :class="{'is-active':$route.path == '/news'}">
                        <router-link :to="{path:'/news'}">新闻资讯</router-link>
                    </li>
                    <li :class="{'is-active':$route.path == '/business'}">
                        <router-link :to="{path:'/business'}">业务服务</router-link>
                    </li>
                    <li :class="{'is-active':$route.path == '/codex'}">
                        <router-link :to="{path:'/codex'}">数据库</router-link>
                    </li>
                    <li :class="{'is-active':curIndex == 7}">
                    	<router-link to="/about">关于我们</router-link>
                    </li>
                </ul>
            </div>

            <div class="hide hamburger show-in-mobile" @click="trans_in = true">
                <Icon type="navicon-round" size="20"></Icon>
            </div>
            <div class="show-in-mobile">
                <transition name="fade">
                    <div class="nav-layout" v-show="trans_in" @click.self="trans_in = false">
                        <transition name="slide-fade">
                            <div class="aside-nav" v-if="trans_in">
                                <div class="aside-login">
                                    <Button type="success" long @click="login">登录</Button>
                                    <br/><br/>
                                    <Button type="ghost" long>注册</Button>
                                </div>
                                <div class="aside-menu">
                                    <ul>
                                        <li><a href="javascript:;">首页</a></li>
                                        <li><ul-tree @transform="toggle" :data="categoryList" class="aside-sub-nav-menu"></ul-tree>
                                        </li>
                                        <li><a href="javascript:;">问与答</a></li>
                                        <li><a href="javascript:;">术语学习</a></li>
                                        <li><a href="javascript:;">新闻资讯</a></li>
                                        <li><a href="javascript:;">业务服务</a></li>
                                        <li><a href="javascript:;">数据库</a></li>
                                        <li><a href="javascript:;">关于我们</a></li>
                                    </ul>
                                </div>

                            </div>
                        </transition>
                    </div>
                </transition>
            </div>
        </div>
    </div>
</template>
<script>
    import ulTree from './ul_tree.vue';
    export default{
        components:{ulTree},
        data(){
            return{
                link:[],
                curIndex:-1,
                trans_in:false,
                depth0:false,
                open: false,
                username: '登录/注册',
                isLogin:false,
                showUserName:false,
            }
        },
        created(){
        	this.getAuth();
        },
        mounted(){

        },
        computed:{
            categoryList(){
                return this.$store.state.lawData
            }
        },
        methods:{
            getLinkParam(link){
                this.$router.push({path:'/statute',query:{q:link.join('|')}});
            },
            toggle(val){
                this.trans_in = val;
            },
            login(){
                this.$store.dispatch('login',true);
                this.trans_in = false;
            },
            showReg(){
            	this.$store.dispatch('changeRegState',true);
                this.trans_in = false;
            },
            getAuth() {

                // banner

                 this.$http.get('/carousel/list',{params:{params:'category'}}).then(ret => {

                    this.carouselList = ret.data.data;



                }).catch(err => {

                    this.$Message.error( 'banner..');
                
                })

            	this.$http.get('/member/me').then(ret => {

            		this.showUserName = true;

                    this.isLogin = true;

            		this.requesrUserNamer = ret.data.data.name;
                    this.$store.dispatch('login', !ret.data.data);

		        }).catch(err => {

		        	this.$Message.error( '请登录..');
		        
		        })

                this.$http.get('/category/list',{params:{include:"childrens.childrens.childrens"}}).then(res => {


                this.categorylist = res.data.data;


                }).catch(err => {

                    this.$Message.error( 'category');
                
                })

            },
            quit(){

            	this.isLogin = false;
            	
            	window.localStorage.removeItem('ccm-token');


//              this.$router.push({path:'/'});
            },
        }
    }
</script>
<style type="text/css" scoped>
.item {
  cursor: pointer;
}
.bold {
  font-weight: bold;
}
ul.demo {
  padding-left: 1em;
  line-height: 1.5em;
  list-style-type: dot;
}
    .header{ border-top:4px solid #15ccac; border-bottom: 1px solid #15ccac;}
    .wrapper{ width:1200px; margin:0 auto; position: relative; height:96px; background:#fff;}
    .logo{ width:217px; height:70px; float: left; margin-top: 12px;}
    .logo img{ height:100%;}
    .login{ position: absolute; right:20px;color: #000000;}
    .login a{ padding:3px 14px; float: left; font-size: 16px; display:flex; align-items: center;}
    .login a.log{ background:#15ccac; color:#fff;}
    .login a.reg{ background:#ddd; color:#333;}
    .log span,.reg span{ display: inline-block; width:24px; height: 24px; margin-right: 6px;}
    .log span{ background:url('../assets/images/icon/login.png') no-repeat;}
    .reg span{ background:url('../assets/images/icon/register.png') no-repeat;}
    .nav{ position: absolute; bottom:0; right:0;}
    .nav > ul > li{ float: left; margin: 0 21px; position: relative;}
    .nav > ul > li a{ font-size: 16px; line-height: 1.5; display:block; padding:0 2px; position: relative;}
    .nav > ul > li a:hover,.nav > ul > li.is-active a{ color:#15ccac;}
    .nav > ul > li a:after{ content:''; display:block; width:0; height:2px; bottom:0; background:#15ccac; transition: width 0.2s ease 0s; margin: 0 auto;}
    .nav > ul > li a:hover:after,.nav > ul > li.is-active a:after{ width:100%;}
    .sub-nav{ position: absolute; min-height:230px; background: #f7f7f7; z-index: 111; top:31px; border:1px solid #eee;white-space:nowrap;}
    .sub-nav-menu{ display:inline-block; min-width: 160px;}
    .sub-nav-menu a{ padding:8px 15px; display:block; transition:all 0.2s linear;}
    .sub-nav-menu a i{ float:right; margin-right:10px;}
    .sub-nav-menu li:hover a{ background:#15ccac; color:#fff;}
    .hide{ display:none;}
    @media (max-width:1024px){
        .hide-in-mobile{ display:none;}
        .show-in-mobile{ display:block !important;}
        .wrapper{ height:68px; width:auto;}
        .logo{ height:54px; margin-top:7px; margin-left:15px;}
        .hamburger{ float:right; margin-top:24px; margin-right:20px; cursor:pointer;}

        .nav-layout{ position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.4); z-index:9999; overflow:hidden;}
        .aside-nav{ width:230px; background:#fff; height:100vh; float:right; position:relative; border-top:4px solid #15ccac; overflow-y:auto; }
        .aside-login{ padding:15px;}
        .aside-menu ul li a{ padding:15px; border-bottom:1px solid #eee; display:block;}
        .aside-menu li.is-active > a{ background:#eee;}
        .aside-menu li a .ivu-icon{ float:right;}
    }
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to{
        transform: translateX(20px);
        opacity: 0;
    }
    .mine{
    	background: #15ccac;
    	height: 30px;
    	color: #FFFFFF;
    	
    }
    .personal{
    	background: #DDDDDD;
    	height: 30px;
    	color: #333;
    }
</style>